import { left } from '@antv/g2plot/lib/plots/sankey/sankey';
import axios from 'axios'
export default {
    mounted() {
        var chinaPopulation_data = [
            { name: "北京市", value: 21893095, grade: 1320 },
            { name: "天津市", value: 13866009, grade: 1138 },
            { name: "河北省", value: 74610235, grade: 303 },
            { name: "山西省", value: 34915616, grade: 223 },
            { name: "内蒙古自治区", value: 24049155, grade: 24 },
            { name: "安徽省", value: 61027171, grade: 396 },
            { name: "浙江省", value: 64567588, grade: 527 },
            { name: "福建省", value: 41540086, grade: 386 },
            { name: "江西省", value: 45188635, grade: 299 },
            { name: "江苏省", value: 84748016, grade: 735 },
            { name: "上海市", value: 24870895, grade: 3807 },
            { name: "湖北省", value: 57752557, grade: 274 },
            { name: "湖南省", value: 66444864, grade: 283 },
            { name: "贵州省", value: 38562148, grade: 266 },
            { name: "重庆市", value: 32054159, grade: 321 },
            { name: "四川省", value: 83674866, grade: 136 },
            { name: "广东省", value: 126012510, grade: 1237 },
            { name: "陕西省", value: 39528999, grade: 113 },
            { name: "河南省", value: 99365519, grade: 654 },
            { name: "山东省", value: 101527453, grade: 637 },
            { name: "青海省", value: 5923957, grade: 8 },
            { name: "广西壮族自治区", value: 50126804, grade: 119 },
            { name: "云南省", value: 47209277, grade: 89 },
            { name: "西藏自治区", value: 3648100, grade: 3 },
            { name: "新疆维吾尔自治区", value: 25852345, grade: 10 },
            { name: "宁夏回族自治区", value: 7202654, grade: 66 },
            { name: "海南省", value: 10081232, grade: 93 },
            { name: "甘肃省", value: 25019831, grade: 37 },
            { name: "黑龙江省", value: 31850088, grade: 60 },
            { name: "辽宁省", value: 42591407, grade: 293 },
            { name: "吉林省", value: 24073453, grade: 137 },
            { name: "台湾省", value: 23141234, grade: 164 },
            { name: "香港特别行政区", value: 7498100, grade: 6910 },
            { name: "澳门特别行政区", value: 672800, grade: 23600 },
        ];

        var chart = echarts.init(document.getElementById("map-echart"));
        // var provice_chart = echarts.init(document.getElementById("provicemap-echart"));
        axios
            .get("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json")
            .then((data) => {
                chart.setOption(this.renderMapOption(chinaPopulation_data, data.data, 'china'));
                /*                 chart.on("click", function (params) {
                                    if (params.name in provinceData) {
                                        const province = params.name;
                                        const cityData = provinceData[province];
                                        console.log(cityData);
                                        chart.setOption(this.renderMapOption(cityData));
                                    }
                                }); */
            });

        //实现点击加载省份地图

/*         chart.on('click', function (param) {
            console.log('点击了');
            for (var i = 0; i < chinaPopulation_data.length; i++) {
                if (param.name == chinaPopulation_data[i].name) {
                    axios.get('https://geo.datav.aliyun.com/areas_v3/bound/530000_full.json').then((data) => {
                        console.log(data.data);
                        provice_chart.setOption(this.renderMapOption(chinaPopulation_data, data.data, 'china'));

                    })
                    break

                }
            }
        }); */

    },
    methods: {
        renderMapOption(polulation_data, map_data, mapname) {
            echarts.registerMap(mapname, map_data);
            return {
                tooltip: {
                    trigger: "item",
                    formatter: function (a, b) {
                        return `地区：${a["name"]}</br>人数：${a["value"]}</br>人口密度：${a["data"].grade}人/平方公里</br>`;
                    },
                },
                grid: {
                    left: "0%",
                    right: "0%",
                    top: "0%",
                    bottom: "0%",
                },
                visualMap: {
                    min: 1000000,
                    max: 100000000,
                    left: "6%",
                    bottom: "0%",
                    text: ["高", "低"],
                    textStyle: { color: "#fff" },
                    calculable: true,
                    inRange: {
                        //渐变颜色
                        color: [
                            "#F7F7F7", // 1. 极浅灰色 - 极低密度
                            "#D0D1E6", // 2. 浅蓝色
                            "#A6B8E4", // 3. 中浅蓝色
                            "#7B9AE3", // 4. 中蓝色
                            "#4D79E6", // 5. 深蓝色
                            "#1F4C9D", // 6. 更深蓝色
                            "#003C77", // 7. 暗蓝色
                            "#003B6F", // 8. 深青色
                            "#003B67", // 9. 更深青色
                            "#003C5D", // 10. 更深灰蓝色
                            "#003C54", // 11. 极深蓝色
                            "#002D43", // 12. 几乎黑色
                            "#001F2B", // 13. 黑色 - 极高密度
                        ],
                    },
                    formatter: function (value) {
                        if (value >= 10000) {
                            return (value / 10000).toFixed(0) + "万";
                        }
                        return value;
                    },
                },
                series: [
                    {
                        label: {
                            show: false,
                            color: "#FFFFFF",
                        },
                        type: "map",
                        center: [106.5, 35.2],
                        map: mapname,
                        data: polulation_data,
                        zoom: 1.7,
                        roam: false,
                    },
                ],
            };
        },
        showProvince(polulation_data, map_data) {
            return this.renderMapOption(polulation_data, map_data)
        }
    }
}